import { Action } from 'history'
import React, { useEffect } from 'react'
import {useDispatch,useSelector} from "react-redux"
import * as action from "../action/index"
import {useState} from "react"
function Shopcar() {
  const [sum,setNum] = useState(0)
  const dispatch = useDispatch()

  const store = useSelector((state)=>{
        return {
            ...state.shopreducer
        }
  })
  const checkitem = ()=>{
     
  }
  const addfn = (id)=>{
        dispatch(action.addFn(id))
  }
  useEffect(()=>{
      let sumzong = store.shoparr.reduce((a,b)=>{
           return a + b.price * b.num
       },0)
     setNum(sumzong)


  },[store.shoparr])

  return (
    <div>
        {
            store.shoparr &&   store.shoparr.length ? store.shoparr.map((item,index)=>{
                return <div key={index}>
                    <img src={item.img} alt="" style={{width:"150px"}}/>
                    <h4>标题:{item.tit}</h4>
                    <h4> <input type="checkbox" checked={item.checked} onChange={checkitem}/> <button>--</button> 个数：{item.num} <button onClick={()=>{addfn(item.id)}}>++</button></h4>
                </div>
            }):"购物车空空"
        }
    <div>p：总价{sum}</div>
    </div>
  )
}

export default Shopcar